<script setup>
import { computed } from 'vue';
import Table from '@/components/Table/index.vue';
import html2pdf from 'html2pdf.js';
// 订单详情表格标题
const columns = computed(() => [
  {
    label: '订单编号',
    prop: 'model',
  },
  {
    label: '下单时间',
    prop: 'createTime',
  },
  {
    label: '预计交期',
    prop: 'createBy',
  },
  {
    label: '订单状态',
    prop: 'brand',
  },
]);
// 订单详情表格数据
const tableData = [
  {
    id: 1,
    model: 'VR37000003305FA100',
    createTime: '2023-10-08 13:40',
    brand: 'yageo',
    parameter: '0402 1nF ±10% 50V X7R',
    components: 'FR-4',
    dosage: 'FR-4',
    stock: ' 总共：1000',
    notes: '$ 100.20',
  },
];

// 下载发票pdf
const handleDownload = () => {
  var element = document.getElementById('invoice');
  html2pdf(element, {
    filename: 'invoice_' + new Date().getTime(),
  });
};
</script>
<template>
  <div class="wrapper">
    <div class="invoice container">
      <div id="invoice">
        <!-- 头部 -->
        <div class="head-container">
          <img src="@/assets/images/layout/icon_logo@2x.png" alt="" class="logo" />
          <img
            src="@/assets/images/icons/icon-download@2x.png"
            alt=""
            class="download"
            @click="handleDownload"
          />
        </div>
        <!-- 信息容器 -->
        <div class="info-container">
          <el-row class="row-item">
            <el-col :span="12">深圳市恒天伟焱科技股份有限公司</el-col>
            <el-col :span="12">
              <label>发票号码：</label>
              <span class="desc">6628460A202310101803656</span>
            </el-col>
          </el-row>
          <el-row class="row-item">
            <el-col :span="12">塘头社区第一工业区E栋1层</el-col>
            <el-col :span="12">
              <label>发票日期：</label>
              <span class="desc">2023年10月10日 </span>
            </el-col>
          </el-row>
          <el-row class="row-item">
            <el-col :span="12">深圳 宝安</el-col>
            <el-col :span="12">
              <label>批号：</label>
              <span class="desc">W20231010180365</span>
            </el-col>
          </el-row>
          <el-row class="row-item">
            <el-col :span="12"> 中国 广东 </el-col>
            <el-col :span="12">
              <label>运送途径：</label>
              <span class="desc">UPS 特快特惠</span>
            </el-col>
          </el-row>
          <el-row class="row-item">
            <el-col :span="12"> service@pcbaaa.com</el-col>
            <el-col :span="12">
              <label>贸易类型：</label>
              <span class="desc">贸易类型：</span>
            </el-col>
          </el-row>
          <el-row class="row-item">
            <el-col :span="12"> +86-75581785031</el-col>
          </el-row>
        </div>

        <!-- 地址容器 -->
        <div class="info-container">
          <el-row class="row-item">
            <el-col :span="12"><h2 class="title">发货地址</h2></el-col>
            <el-col :span="12"><h2 class="title">收货地址</h2></el-col>
          </el-row>
          <el-row class="row-item">
            <el-col :span="12">姓名</el-col>
            <el-col :span="12">姓名</el-col>
          </el-row>
          <el-row class="row-item">
            <el-col :span="12">街道详细地址</el-col>
            <el-col :span="12">街道详细地址</el-col>
          </el-row>
          <el-row class="row-item">
            <el-col :span="12">加利福利亚 洛杉矶</el-col>
            <el-col :span="12">加利福利亚 洛杉矶</el-col>
          </el-row>
          <el-row class="row-item">
            <el-col :span="12">美国</el-col>
            <el-col :span="12">美国</el-col>
          </el-row>
          <el-row class="row-item">
            <el-col :span="12">邮箱：</el-col>
            <el-col :span="12">邮箱：</el-col>
          </el-row>
          <el-row class="row-item">
            <el-col :span="12">电话：A9A 9A</el-col>
            <el-col :span="12">电话：A9A 9A</el-col>
          </el-row>
          <el-row class="row-item">
            <el-col :span="12">登记编号：</el-col>
            <el-col :span="12">税号编号：</el-col>
          </el-row>
          <Table class="info-table" :data="tableData" :columns="columns"> </Table>
          <!-- 价格容器 -->
          <el-row type="flex" justify="end">
            <div class="price">
              <div class="price-item">
                <p class="label">小记：</p>
                $102
              </div>
              <div class="price-item">
                <p class="label">运输：</p>
                $102
              </div>
              <div class="price-item blod-item">
                <p class="label">汇总：</p>
                $102
              </div>
            </div></el-row
          >
        </div>
      </div>

      <div class="m-tb-20">
        <el-button type="primary" @class="goBack">返回订单</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.m-tb-20 {
  height: 100px;
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.wrapper {
  background: #f5f5f5;
  padding: 32px 0 32px;
  .invoice {
    border-radius: 8px;
    background: #fff;
    &.container {
      width: 1440px;
      margin: 0 auto;
    }

    .head-container {
      padding: 24px 32px 14px;
      display: flex;
      justify-content: space-between;
      .logo {
        width: 165px;
      }
      .download {
        cursor: pointer;
        width: 24px;
        height: 24px;
      }
    }

    .info-container {
      color: #383838;
      font-size: 14px;
      padding: 24px 32px 32px;
      border-bottom: 1px solid #f5f5f5;
      .row-item {
        padding-bottom: 8px;
        .title {
          padding-bottom: 12px;
          color: #383838;
          font-size: 18px;
          font-weight: 700;
        }
        &:last-child {
          padding-bottom: 0;
        }
        label {
          color: #383838;
          font-size: 14px;
          font-weight: 700;
        }
      }
    }
    .info-table {
      margin-top: 32px;
      --el-table-header-text-color: #fff !important;
      --el-table-header-bg-color: var(--mall-color-primary) !important;
      --el-table-row-hover-bg-color: transparent;
    }
    .price {
      padding-top: 72px;
      padding-right: 200px;
      &-item {
        padding-bottom: 12px;
        display: flex;
        align-items: center;
        color: #ff8d1a;
        font-size: 16px;
        font-weight: 500;
        > .label {
          padding-right: 10px;
          width: 98px;
          color: #383838;
          font-weight: 700;
        }
      }
    }
  }
}

::v-deep .el-descriptions {
  &__cell {
    line-height: 19px !important;
  }
  &__label {
    color: #383838 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }
}
</style>
